<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>studens_with_paginator</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrapjs"></script>

</head>
<body>

<ul>

    {% for student in page_object.object_list %}
        <li>{{ student.s_name }}</li>
    {% endfor %}

</ul>


<nav aria-label="Page navigation">
    <ul class="pagination">
        {#如果有上一页才能点，不然禁用按钮#}
        {% if page_object.has_previous %}
            <li>
                <a href="{% url 'DjangoCache:get_students_with_page' %}?page={{ page_object.previous_page_number }}"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}
        {% for page_index in page_range %}
            {#使当前页码高亮#}
            {% ifequal page_index page_object.number %}
                <li class="active"><a
                        href="{% url 'DjangoCache:get_students_with_page' %}?page={{ page_index }}">{{ page_index }}</a>
                    {% else %}
                <li>
                <a href="{% url 'DjangoCache:get_students_with_page' %}?page={{ page_index }}">{{ page_index }}</a>
            {% endifequal %}
        </li>
        {% endfor %}

        {#如果有下一页才能点，不然禁用按钮#}
        {% if page_object.has_next %}
            <li>
                <a href="{% url 'DjangoCache:get_students_with_page' %}?page={{ page_object.next_page_number }}"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}
    </ul>

</nav>
</body>
</html>